<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style.css')}}">

    <title>Abalone Prediction Service</title>
</head>

<body>
    <div class="container m-1">
        <h1>Abalone Age Predictor</h1>
        <h3 class="mb-4">Please enter your abalone measurements below:</h3>
        <form method="POST">
            {# This hidden_tag is a CSRF security feature. #}
            {{ form.hidden_tag() }}
            {{ form.length.label }} {{form.length}}
            <br>
            {{ form.diameter.label }} {{form.diameter}}
            <br>
            {{ form.height.label }} {{form.height}}
            <br>
            {{ form.whole_weight.label }} {{form.whole_weight}}
            <br>
            {{ form.submit() }}
        </form>
    </div>
</body>

</html>